<template>
  <page-card title="输入管理">
    <div class="public-list">
      <div class="public-list-tools">
        <a-row type="flex"
               style="margin-bottom:20px"
               justify="start">
          <a-col flex="1">
            <a-button type="primary"
                      icon="plus"
                      action
                      @click="handleEdit('')">
              新增
            </a-button>
          </a-col>
          <a-col>
            <a-input-search v-model="params.keyword"
                            placeholder="输入名称"
                            allow-clear
                            @search="search" />
          </a-col>
        </a-row>
      </div>
      <div class="public-list-panel">
        <a-table :columns="columns"
                 :data-source="dataList"
                 :rowKey="(item, index) => index"
                 @change="handleTableChange"
                 :pagination="pagination">
          <span slot="status"
                slot-scope="text,item">
            <template>
              <a-switch checked-children="启用"
                        un-checked-children="禁用"
                        :checked="text=='1'?true:false"
                        @change="handleActivate(item.id,item.status)" />
            </template>
          </span>
          <span slot="action"
                slot-scope="text, item">
            <template>
              <a @click="handleEdit(item.id)">编辑</a>
            </template>
            <a-divider type="vertical" />
            <template>

              <a-popconfirm title="确定要删除吗？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="handleDelete(item.id)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </template>
          </span>
        </a-table>
      </div>
    </div>
  </page-card>
</template>

<script>
import { PAGINATION } from '../../../constants'
import { pageInModel, delInModel, updateStatusInModel } from '../../../api/exchanger/index'

export default {
  name: 'InputList',
  data () {
    return {
      params: {
        keyword: ''
      },
      pagination: PAGINATION,
      dataList: [
        // {
        //   mcName: '公安系统输入',
        //   fsName: 'HTTP',
        //   status: '1'
        // }
      ],
      columns: [
        {
          title: '序号',
          width: 100,
          align: 'center',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '输入名称',
          align: 'center',
          dataIndex: 'typeInName',
          ellipsis: true,
          scopedSlots: { customRender: 'tl' }
        },
        {
          title: '输入方式',
          align: 'center',
          dataIndex: 'typeIn',
          ellipsis: true,
          customRender: (text, row, index) => {
            if (text == '1') {
              return 'HTTP'
            } else if (text == '2') {
              return 'MQ'
            } else if (text == '3') {
              return 'HTTP+MQ'
            } else if (text == '4') {
              return '定时推送'
            }
          }
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          ellipsis: true,
          scopedSlots: { customRender: 'status' }
          // customRender: (text, row, index) => {
          //   if (text == '1') {
          //     return <span style="color: #70b603;">启用</span>
          //   } else {
          //     return <span style="color: #d9001b;">禁用</span>
          //   }
          // }
        },
        {
          title: '操作',
          width: 130,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    if (!this.$route.meta.keepAlive) {
      this.getList()
    }
  },
  activated () {
    this.getList()
  },
  methods: {
    // 搜索
    search () {
      this.dataList = []
      this.pagination.current = 1
      this.getList()
    },
    // 列表数据
    getList () {
      let par = {
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize,
        keyword: this.params.keyword
      }
      pageInModel(par).then((res) => {
        this.dataList = res.list || []
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
        this.pagination.pageSize = res.pageSize
      })
    },
    // 新增、修改
    handleEdit (id) {
      this.$router.push({
        path: './edit',
        query: { id: id }
      })
    },
    // 删除
    handleDelete (id) {
      delInModel(id).then((res) => {
        // this.message.info('已删除！')
        this.getList()
      })
    },
    // 启用 禁用
    handleActivate (id, status) {
      let values = {
        id: id,
        status: status == '0' ? '1' : '0'
      }
      updateStatusInModel(values).then((res) => {
        // this.message.info(values.status == '0' ? '已禁用！' : '已启用！')
        this.getList()
      })
    },
    // 分页、排序、筛选变化时触发
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>